 * {
     margin: 0;
     padding: 0;
 }

 ul {
     list-style: none;
 }

 a {
     text-decoration: none;
     color: #B0B0B0;
     font-size: 14px;
 }

 body {
     font-family: arial;
 }


 /*头部*/

 #header {
     width: 100%;
     height: 50px;
     background: rgba(0.0.0.0);
 }

 /*头部左侧导航菜单*/
 .wrap-menu {
     width: 1300px;
     height: 50px;
     margin: 0 auto;
     display: flex;
 }

 .left-menu {
     height: 50px;
     flex: 5;
     padding-left: 25px;
 }

 .left-menu ul li {
     display: inline-block;
     padding-left: 5px;
     line-height: 50px;
 }

 .left-menu ul li a {
     font-size: 10px;
 }

 .left-menu ul li a::after {
     content: " |";
 }

 .left-menu ul li a:hover {
     color: white;
 }


 /*中间菜单*/
 .middle-menu {

     flex: 1;
 }

 .middle-menu ul li {
     display: inline-block;
     line-height: 50px;
     padding-left: 10px;
 }

 .middle-menu ul li a {
     font-size: 10px;
 }

 .middle-menu ul li a:hover {
     color: white;
 }


 /*右边购物车*/

 .right-menu {
     height: 50px;

     flex: 1;
 }

 .right-menu .shopping {
     width: 120px;
     text-align: center;
     background-color: #424242;
     position: relative;
 }

 .right-menu p {
     position: absolute;
     left: -160px;
     width: 278px;
     height: 100px;
     line-height: 100px;
     font-size: 12px;
     box-shadow: 0px 3px 5px gainsboro;
     background-color: white;
     text-align: center;
     opacity: 0;
 }

 .right-menu .shopping:hover {
     background-color: white;
 }

 .right-menu:hover p {
     z-index: 10;
     opacity: 1;
     transition: opacity 1s;
 }

 .right-menu a {
     line-height: 50px;
     background: url(../img/d7db56d1d850113f016c95e289e36efa.png) no-repeat;
     background-size: 20px 20px;
     background-position: left;
     font-size: 10px;
 }

 .right-menu a:hover {
     color: #FF6A00;
     background: url(../img/692a6c3b0a93a24f74a29c0f9d68ec71.png) no-repeat;
     background-size: 20px 20px;
     background-position: left;
 }

 .right-menu {
     margin-left: 20px;
 }

 .right-menu span {
     padding-left: 25px;
 }



 /*内容部分*/

 #content {
     width: 1200px;
     height: 100px;
     margin: 10px auto;
     display: flex;
     align-items: center;
 }

 /* 左边图片 */

 .content-left {
     flex: 1;
 }

 /*中间导航内容*/

 .content-menu {
     flex: 2.5;
 }

 .content-menu ul li {
     display: inline-block;
     padding-left: 10px;
 }

 .content-menu ul li a {
     color: black;
     font-size: 15px;
 }

 .content-menu ul li a:hover {
     color: #FF6A00;
 }


 /*右边搜索框*/
 .content-right {
     flex: 1;
 }

 .content-right [type=text] {
     height: 45px;
     line-height: 45px;
     outline: none;
     outline-color: #FF6A00;
     border: 1px solid #e1e1e1;
 }

 .content-right input:focus {
     border: 1px solid #FF6A00;
 }

 .content-right input:focus+i {
     border-color: #FF6A00;
 }

 .content-right i {
     width: 50px;
     height: 50px;
     font-size: 25px;
     padding: 10px;
     border: 1px solid #e1e1e1;
     border-left: none;
     vertical-align: middle;
     margin-left: -6px;
 }

 .content-right i:hover {
     color: white;
     background: #FF6900;
 }